<template>
<div class="page-find">

    <div class="tag"  @tap='() =>{into(item.id)}' v-for='(item, index) of list' :key='index'>
        <div class="content">
            <div class="summary-img" v-if='item.imgs[0]'>
                <div>
                    <img :src="baseUrl + item.imgs[0]" alt="">
                </div>
            </div>
            <h1 class="summary">
                {{item.summary}}
            </h1>
        </div>
        
        <div class="author-info">
            <div class="head-portrait">
               <div>
                    <img :src="item.headPortrait" alt="">
               </div>
            </div>
             
            <div>
                <span class='author'>
                    {{item.author}}
                </span>
                <span class="create-time">
                    {{item.createTime}}
                 </span>
            </div>
           
        </div>
    </div>

    <span class="more" v-if='bottomLoader' :class=" bottomLoader ? 'action' : ''">
        <i-icon class="icon-loader" size=20 type="refresh" />
        加载更多...
    </span>

</div>
</template>

<script>
import {mapActions, mapState} from'vuex'

const page = {

    data(){
        return {
            list: [],
            bottomLoader: false
        }
    },

    computed: {
        ...mapState('http', ['initStatus', 'baseUrl']),
        
    },

    methods:{

        ...mapActions('http', ['getRecommends']),

        into(id){
            wx.navigateTo({
                url: `/pages/tagContent/main?id=${id}`
            })
        },

        formTime(timeStr){
            let timeObj = new Date(timeStr);
            let day = timeObj.getDate();
            let month = timeObj.getMonth();
            return `${day}日${month}月`
        },
    
        async loaderList(time,count = 0){
            let _this = this;

            clearTimeout(time);
            if(count > 30){return};
            if(!this.initStatus){
                time = setTimeout(() =>{
                _this.loaderList(time, count+1);
                }, 100)
                return
            }

            let list = await this.getRecommends();
            
            if(list.length){
                list.forEach(item =>{
                    item.createTime = _this.formTime(item.createTime)
                })

                this.list = [...this.list, ...list]

            }else{
                 wx.showToast({
                    title: '没有更多',
                })
            }

            this.bottomLoader = false;
            
        }
       
    },

     onLoad(){
        this.loaderList();
    },

    onReachBottom(){
        this.bottomLoader = true;
        // this.loaderList();

        // 测试
        setTimeout(() => {
            this.loaderList();
        }, 1000);
    }

}

export default page;

</script>

<style scoped lang='less'>

.page-find{
    padding: 3*@interval;
    background: @grayColor;
}

.tag{
    &:extend(.card);

    &+&{
        margin-top: 3*@interval;
    }
    
    .summary-img{
        &:extend(.img-box);
        margin-bottom: 2*@interval;
        height: 320rpx;
        border-radius: 6rpx;
    }

    .summary{
        padding-bottom: 3*@interval;
    }

    .author-info{
        display: flex;
        align-items: center;
    }

    .head-portrait{
       
        &:extend(.img-box);
        flex: 0 0 80rpx;
        @size: 80rpx;
        margin-right: 2*@interval;
        width: @size;
        height: @size;
        border-radius: 100%;
        
        img{
            width: @size;
            height: @size;
        }
    }
    
    .author,
    .create-time{
        display: block;
    }

    .author{
        &:extend(.fontSize_sub);
    }
    .create-time{
        &:extend(.fontSize_small);
        margin-top: @interval;
        color: @darkColor;
    }

}

.more{
    &:extend(.fontSize_sub);
    display: block;
    padding: 2*@interval 0;
    text-align: center;
    color: @darkColor;
    transition: all .5s;
    
    .icon-loader{
        display: inline-block;
        animation: rotate 1s linear infinite; 
    }

    @keyframes rotate {
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }
}




</style>